<template>
	<view class="container">
		<view class="form-container">
			<view class="form-group">
				<text class="label">借款金额</text>
				<input type="number" class="input" v-model="borrowInfo.amount" placeholder="请输入借款金额" @blur="checkAmount" />
				<text class="error-msg" v-if="errors.amount">{{ errors.amount }}</text>
			</view>

			<view class="form-group">
				<text class="label">借款期限</text>
				<picker mode="selector" :range="periodOptions" @change="handlePeriodChange">
					<view class="picker">
						{{ borrowInfo.period ? periodOptions[borrowInfo.period] : '请选择借款期限' }}
					</view>
				</picker>
				<text class="error-msg" v-if="errors.period">{{ errors.period }}</text>
			</view>

			<view class="form-group">
				<text class="label">借款用途</text>
				<textarea class="textarea" v-model="borrowInfo.purpose" placeholder="请简要说明借款用途" @blur="checkPurpose" />
				<text class="error-msg" v-if="errors.purpose">{{ errors.purpose }}</text>
			</view>

			<view class="form-group">
				<text class="label">还款方式</text>
				<picker mode="selector" :range="repaymentOptions" @change="handleRepaymentChange">
					<view class="picker">
						{{ borrowInfo.repayment ? repaymentOptions[borrowInfo.repayment] : '请选择还款方式' }}
					</view>
				</picker>
				<text class="error-msg" v-if="errors.repayment">{{ errors.repayment }}</text>
			</view>

			<view class="form-group">
				<text class="label">银行卡</text>
				<picker mode="selector" :range="bankCards" range-key="cardNumber" @change="handleBankCardChange">
					<view class="picker">
						{{ borrowInfo.bankCard ? bankCards[borrowInfo.bankCard].cardNumber : '请选择收款银行卡' }}
					</view>
				</picker>
				<text class="error-msg" v-if="errors.bankCard">{{ errors.bankCard }}</text>
			</view>

			<button class="submit-btn" @click="submitBorrow">提交申请</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			borrowInfo: {
				amount: '',
				period: '',
				purpose: '',
				repayment: '',
				bankCard: ''
			},
			errors: {
				amount: '',
				period: '',
				purpose: '',
				repayment: '',
				bankCard: ''
			},
			periodOptions: ['3个月', '6个月', '12个月', '24个月', '36个月'],
			repaymentOptions: ['等额本息', '等额本金', '按月付息到期还本'],
			bankCards: []
		}
	},
	onLoad() {
		this.loadBankCards();
	},
	methods: {
		loadBankCards() {
			const user = uni.getStorageSync('user');
			uni.request({
				url: '/api/my/bankCard/list',
				method: 'POST',
				data: {
					username: user.username,
					password: user.password
				},
				success: (res) => {
					if (res.data.cards) {
						this.bankCards = res.data.cards;
					}
				}
			});
		},
		checkAmount() {
			const amount = this.borrowInfo.amount;
			if (!amount) {
				this.errors.amount = '请输入借款金额';
				return false;
			}
			if (amount < 1000) {
				this.errors.amount = '借款金额不能少于1000元';
				return false;
			}
			if (amount > 1000000) {
				this.errors.amount = '借款金额不能超过100万元';
				return false;
			}
			this.errors.amount = '';
			return true;
		},
		handlePeriodChange(e) {
			this.borrowInfo.period = e.detail.value;
			this.errors.period = '';
		},
		checkPurpose() {
			const purpose = this.borrowInfo.purpose;
			if (!purpose) {
				this.errors.purpose = '请输入借款用途';
				return false;
			}
			if (purpose.length < 10) {
				this.errors.purpose = '借款用途描述不能少于10个字';
				return false;
			}
			this.errors.purpose = '';
			return true;
		},
		handleRepaymentChange(e) {
			this.borrowInfo.repayment = e.detail.value;
			this.errors.repayment = '';
		},
		handleBankCardChange(e) {
			this.borrowInfo.bankCard = e.detail.value;
			this.errors.bankCard = '';
		},
		submitBorrow() {
			if (this.checkAmount() && this.checkPurpose() && 
				this.borrowInfo.period !== '' && 
				this.borrowInfo.repayment !== '' && 
				this.borrowInfo.bankCard !== '') {
				
				const user = uni.getStorageSync('user');
				uni.request({
					url: '/api/my/borrow/apply',
					method: 'POST',
					data: {
						username: user.username,
						password: user.password,
						amount: this.borrowInfo.amount,
						period: this.periodOptions[this.borrowInfo.period],
						purpose: this.borrowInfo.purpose,
						repayment: this.repaymentOptions[this.borrowInfo.repayment],
						bankCardId: this.bankCards[this.borrowInfo.bankCard].id
					},
					success: (res) => {
						if (res.data.success) {
							uni.showToast({
								title: '申请提交成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.message || '申请提交失败',
								icon: 'none'
							});
						}
					}
				});
			} else {
				uni.showToast({
					title: '请完善申请信息',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.form-container {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
}

.form-group {
	margin-bottom: 30rpx;
}

.label {
	display: block;
	color: #333333;
	margin-bottom: 16rpx;
	font-size: 28rpx;
}

.input {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	background-color: #ffffff;
	box-sizing: border-box;
}

.textarea {
	width: 100%;
	height: 200rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	background-color: #ffffff;
	box-sizing: border-box;
}

.picker {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	color: #333333;
}

.error-msg {
	color: #ff4d4f;
	font-size: 24rpx;
	margin-top: 8rpx;
	display: block;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background-color: #007AFF;
	color: #ffffff;
	border-radius: 44rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submit-btn:active {
	background-color: #0062cc;
	transform: scale(0.98);
}
</style> 